<template>
  <v-row no-gutters>
    <v-col v-for="item in links" :key="item.text">
      <div class="nav-link" @click="$router.push(item.href)">
        <v-icon :color="item.active ? 'red' : ''" class="mb-1">{{
          'mdi-' + item.icon
        }}</v-icon>
        <span>{{ item.text }}</span>
      </div>
    </v-col>
  </v-row>
</template>

<script>
export default {
  data() {
    return {
      links: [
        {
          icon: 'calendar-text-outline',
          text: '我的订单',
          active: 1,
          href: '/myOrders'
        },
        {
          icon: 'calendar-search',
          text: '待付款',
          active: 0
        },
        {
          icon: 'package-variant-closed',
          text: '待收货',
          active: 0
        },
        {
          icon: 'comment-processing-outline',
          text: '待评价',
          active: 0
        }
        // {
        //   icon: 'currency-usd',
        //   text: '售后服务',
        //   active: 0
        // }
      ]
    };
  },
  methods: {
    doActiveNavLink(index) {
      this.links.forEach(each => (each.active = 0));
      this.links[index].active = 1;
    }
  }
};
</script>

<style lang="less" scoped>
.nav-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 70px;
  i {
    font-size: 29px;
    // color: #fd994b;
  }
  span {
    font-size: 11px;
  }
}
.ad-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  font-size: 13px;
  padding: 0 20px;
}
</style>
